<template>
	<div class="page">
		<u-navbar title="分类列表">
			<!-- #ifndef MP-WEIXIN -->
			<div slot="right" @click="delLeve1Category" class="right">
				删除分类
			</div>
			<!-- #endif -->
		</u-navbar>
		<!-- #ifdef MP-WEIXIN -->
		<div  @click="delLeve1Category" class="right-a" style="margin:30rpx 0">
				删除分类
			</div>
			<!-- #endif -->
		<div class="drop-list" :style="{paddingTop:statusBarHeight + 'px' }">
			
			<div class="drop-list-tab">
				<u-tabs :list="tabList" :show-bar="false" active-color="#333" :current="current" @change="changeTabs">
				</u-tabs>
			</div>
			<div class="drop-list-config" @click="addLeve1Category">
				<div>
					添加一级分类
				</div>
			</div>
		</div>
		<div class="content" v-if="categoryData.length !=0 && categoryData[current].children.length != 0">
			<u-swipe-action @click="changeSwipeCategory" :show="item.show" :options="options" :index="index"
				v-for="(item,index) in categoryData[current].children" :key="item.id">
				<div class="global-item flex">
					<div class="item-left">{{item.labelName}}</div>
					<div class="item-right">
						左滑修改/删除
					</div>
				</div>
			</u-swipe-action>
		</div>
		<div v-else>
			<u-empty mode="list"></u-empty>
		</div>

		<div class="submit fixed" @click="addCategory()">
			添加{{tabList[current].name|| ''}}分类

		</div>
		<!-- 删除确定框 -->
		<u-modal v-model="enableModal" :confirm-style="{color:'#333'}" content="是否删除？" @confirm="confirmModal"
			show-cancel-button></u-modal>
	</div>
</template>

<script>
	import {
		getShopGoodsLabelList,
		delShopGoodsLabel
	} from "@/api/shops";
	let systemInfo = uni.getSystemInfoSync();
	export default {
		data() {
			return {
				statusBarHeight: systemInfo.statusBarHeight,
				enableModal: false, //是否启动模态框
				categoryData: [], //分类列表
				current: 0,
				options: [{
						text: "编辑",
						style: {
							backgroundColor: "#999",
						},
					},
					{
						text: "删除",
						style: {
							backgroundColor: "#333",
						},
					},
				],
				tabList: [{
					name: ""
				}],
				storeData: {},
			};
		},
		onShow() {
			this.init();
		},

		methods: {
			// 添加一级分类
			addLeve1Category() {
				uni.navigateTo({
					url: `/pages/other/setup/addCategory?add=true`,
				});
			},
			// 点击模态框
			async confirmModal() {
				let res = await delShopGoodsLabel(this.storeData.id);
				if (res.data.success) {
					uni.showToast({
						title: "删除成功!",
						duration: 2000,
						icon: "none",
					});

					setTimeout(() => {
						this.init();
					}, 500);
				}
			},
			// 删除一级分类
			delLeve1Category() {
				this.storeData = this.categoryData[this.current];
				this.enableModal = true;
			},
			// 编辑或删除 index == 0 ? '编辑' :'删除' 二级分类
			changeSwipeCategory(val, index) {
				if (index) {
					// 删除
					this.storeData = this.categoryData[this.current].children[val];
					this.enableModal = true;
				} else {
					uni.navigateTo({
						url: `/pages/other/setup/addCategory?data=${encodeURIComponent(
            JSON.stringify(this.categoryData[this.current].children[val])
          )}&update=true&id=${this.categoryData[this.current].id}`,
					});
				}
			},

			// 点击tab赋值index
			changeTabs(index) {
				this.current = index;
			},

			// 添加分类
			addCategory() {
				uni.navigateTo({
					url: `/pages/other/setup/addCategory?data=${encodeURIComponent(
          JSON.stringify(this.categoryData[this.current])
        )}`,
				});
			},

			async init() {
				this.categoryData = [];
				uni.showLoading({
					title: "加载中",
				});

				//商品分类
				let res = await getShopGoodsLabelList();
				if (res.data.success) {
					/**
					 * 商品分类布局 我觉得tabs为一级 tabs的内容为二级
					 * 所以将数据进行储存后续遍历
					 */
					res.data.result.forEach((item) => {
						if (item.children && item.children.length != 0) {
							item.children.map((child) => {
								this.$set(child, "show", false);
							});
						}
					});
					this.categoryData = res.data.result;
					this.tabList = res.data.result.map((item) => {
						return {
							name: item.labelName,
							value: item.id
						};
					});
					this.current = 0;
				}

				uni.hideLoading();
			},
		},
	};
</script>
<style scoped>
	page {
		background: #f6f6f6;
	}
</style>
<style lang="scss" scoped>
	@import "@/components/global.scss";

	.fixed {
		position: fixed;
		bottom: 0;
		width: 80%;
		left: 10%;
		bottom: 10rpx;
	}

	.content {
		padding-bottom: 100rpx;
	}

	.right {
		font-size: 30rpx;
		margin-right: 32rpx;
	}

	/deep/ .u-swipe-action {
		background: none !important;
		margin: 20rpx 0;
	}

	.global-item {
		justify-content: space-between;
		border-radius: 0 !important;
		margin: 0;
		width: calc(750rpx - 64rpx);
	}

	.item-left {
		flex: 3;
	}

	.item-right {
		flex: 1;
		display: flex;
		color: #999;
		text-align: right;
		font-size: 24rpx;
		align-items: center;
		justify-content: flex-end;
	}

	.add-child {
		background: #333;
		border-radius: 10rpx;
		font-size: 24rpx;
		padding: 5rpx 24rpx;
		color: #fff;
		text-align: center;
	}

	.drop-list-tab {
		flex: 2 !important;
		overflow: hidden;
	}

	.drop-list-config {
		display: flex;
		justify-content: flex-end;
		flex: 1;
		padding-bottom: 10rpx;
	}

	@media screen and(min-width:750rpx) {
		/deep/ .u-navbar-inner {
			height: 100rpx !important;
		}

		/deep/ .u-navbar-placeholder {
			height: 100rpx !important;
		}
	}
</style>
